<template>
  <section class="bgff p20" style="min-height:100%;">
    <section>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="项目地区">
                <el-select v-model="formInline.region"  filterable placeholder="项目地区">
                    <el-option label="雨城区" value="shanghai"></el-option>
                    <el-option label="名山区" value="beijing"></el-option>
                    <el-option label="天全县" value="beijing"></el-option>
                    <el-option label="荥经县" value="beijing"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="项目名称">
                <el-select v-model="formInline.projectName" filterable placeholder="项目名称">
                    <el-option label="项目1" value="1"></el-option>
                    <el-option label="项目2" value="2"></el-option>
                    <el-option label="项目3" value="3"></el-option>
                </el-select>
            </el-form-item>
<!--        <el-form-item label="设备名称">
          <el-select v-model="formInline.region" filterable placeholder="设备名称">
            <el-option label="设备1" value="shanghai"></el-option>
            <el-option label="设备2" value="beijing"></el-option>
            <el-option label="设备3" value="shjh"></el-option>
            <el-option label="设备4" value="shjhd"></el-option>
            <el-option label="设备5" value="shj4"></el-option>
            <el-option label="设备6" value="shj5"></el-option>
          </el-select>
        </el-form-item>-->
        <el-form-item label="报警类型">
          <el-select v-model="formInline.region" filterable placeholder="报警类型">
            <el-option label="阈值报警" value="shanghai"></el-option>
            <el-option label="设备离线报警" value="beijing"></el-option>
            <el-option label="通讯失败报警" value="shjh"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </section>
    <tabled></tabled>
  </section>
</template>

<script>
import tabled from '@/components/reportdata.vue'
export default {
     components:{tabled},
  data() {
    return {
      formInline: {
        user: "",
        region: ""
      },
      value1: ""
    };
  },
  mounted() {
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    drawPie() {
      let myChart = this.$echarts.init(document.getElementById("myChart5"));
      myChart.setOption({
        title: {
          text: "",
          subtext: "",
          x: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: ["正常", "报警", "离线"]
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [
              { value: 935, name: "正常" },
              { value: 310, name: "报警" },
              { value: 234, name: "离线" }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      });
    },
    drawBar() {
      let myChart = this.$echarts.init(document.getElementById("myChart6"));
      myChart.setOption({
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: "0",
          right: "0",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "直接访问",
            type: "bar",
            barWidth: "40%",
            data: [10, 52, 200, 334, 390, 330, 220]
          }
        ]
      });
    }
  }
};
</script>

<style lang="less">
</style>
